<template>
  <div>
    <h1>EntryBuffer</h1>

    <el-table
      border
      stripe
      :data="entryBufferList">
      <el-table-column sortable prop="id" label="id"/>
      <el-table-column sortable prop="pipelineId" label="pipelineId"/>
      <el-table-column sortable prop="eventType" label="eventType"/>
      <el-table-column sortable prop="schemaName" label="schemaName"/>
      <el-table-column sortable prop="tableName" label="tableName"/>
      <el-table-column sortable prop="sql" label="sql"/>

      <el-table-column label="rows">
        <span slot-scope="scope"
          :title="JSON.stringify(scope.row.rows)"
          style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{scope.row.rows}}</span>
      </el-table-column>

      <el-table-column sortable prop="createdAt" label="createdAt"/>
      <el-table-column sortable prop="flushedAt" label="flushedAt"/>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      entryBufferList: []
    };
  },

  mounted() {
    var _this = this;
    sdk.EntryBufferApi().list({
      page: { pageSize: 100 }
    }).then(res => {
      _this.entryBufferList = res.list;
    });
  }
}
</script>